<template>
	<view class="login_container">
		<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
		<button class="login_btn" type="primary" @click="getUserProfile">一键登录</button>
		<text class="tips_text">登录后尽享更多权益</text>
	</view>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { showMsg } from '../../static/common'
import { userApi } from '../../static/api'
	export default {
		name:"my-login",
		data() {
			return {
				
			};
		},
		computed: {
			...mapState('my_user', ['token', 'redirectInfo']),
		},

		methods: {
			...mapMutations('my_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),
			getUserProfile() {
				uni.getUserProfile({
				  desc: '你的授权信息',
				  success: (res) => {
						// 将信息存到 vuex 中
						this.updateUserInfo(res.userInfo);
						this.getToken(res);
					},
					fail: (res) => {
						return showMsg.showErrMsg('您取消了登录授权！');
					}
				});
			},
			
			async getToken(info) {
				const [err, res] = await uni.login().then().catch((err) => err);
				if(err || res.errMsg !== 'login:ok') return showMsg.showErrMsg('登陆失败！');
				const {encryptedData, iv, rawData, signature} = info;
				const queryParms = {
					code: res.code,
					encryptedData: encryptedData,
					iv: iv,
					rawData: rawData,
					signature: signature,
				};
				// await userApi.getToken(queryParms)
				// .then((data) => {
					this.updateToken('123456');
					showMsg.showErrMsg('登录成功!');
				// })
				// .catch((err) => {
				// 	console.log(err);
				// });
				this.navigateBack();
			},
			
			navigateBack() {
				if(this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
					uni.switchTab({
						url: this.redirectInfo.from,
						//导航成功后，将vuex中的redirectInfo对象重置为null
						complete: () => {
							this.updateRedirectInfo(null);
						},
					});
				}
			},
		},
	}
</script>

<style lang="scss">
.login_container {
	height: 750rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #f8f8f8;
	position: relative;
	overflow: hidden;
	&::after {
		content: ' ';
		display: block;
		position: absolute;
		width: 100%;
		height: 40px;
		left: 0;
		bottom: 0;
		background-color: white;
		border-radius: 100%;
		transform: translateY(50%);
	}
	.login_btn {
		width: 90%;
		border-radius: 100px;
		margin: 15px 0;
		background-color: #c00000;
	}
	.tips_text {
		font-size: 12px;
		color: gray;
	}
}
</style>